<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a {
        width: 100px;
        height: 100px;
        border: 1px solid lawngreen;
    }
    .box{
			width: 100px;
			height: 100px;
			background-color: aquamarine;
		}
		.box1{
			font-size: 50px;
		}
		.hongse{
			color: red;
		}
</style>

<body>
    <div id="app">
        <!-- 1. -->
        <button @mouseover="xsxs=true" @mouseout="xsxs=false">移动移除</button>
        <div v-if="xsxs" class="a">显示消失</div>

        <!-- 2. -->
        <button @click="dl=true">登录</button>
        <div v-if="dl" @click="dl=false" class="a">X</div>


        <!-- 3. -->
        <button @click="activeIndex=0" :class="{'hongse':activeIndex===0    }">微信</button>  
        <button  @click="activeIndex=1" :class="{'hongse':activeIndex===1    }">支付宝</button>  
        <button @click="activeIndex=2" :class="{'hongse':activeIndex===2    }">银行卡</button>  
       


        <!-- 4. -->
        <button @click="fk('内容1')">1</button>
        <button @click="fk('内容2')">2</button>
        <button @click="fk('内容3')">3</button>
        <p> {{ zf }}</p>



        <!-- 5. -->
        <select name="" id="" v-model="val">
            <option value="1">选择1</option>
            <option value="2">选择2</option>
            <option value="3">选择3</option>
            <option value="4">选择4</option>
        </select>
       
    </div>     
</body>
<script src="./vue.js"></script>
<script>
    //  1. 鼠标放上去显示 移开消失 
    // const { createApp, ref } = Vue;
    // const app = createApp({
    //     setup() {
    //         let xsxs = ref(false);
    //         return {
    //             xsxs
    //         }
    //     }
    // }).mount('#app')




    // 2. 点击登陆 弹出登录框点击X关闭登录框  
    // const {createApp,ref}=Vue;
    // const app=createApp({
    //     setup(){
    //         let dl = ref(false);
    //         return {
    //             dl
    //         }
    //     }
    // }).mount('#app')




    // 3. 切换支付方式效果  
    // const {createApp,ref} = Vue;
	// 	createApp({
	// 		setup() {
				
	// 			let c1 = ref('box1')
	// 			let red = ref('hongse')
	// 			let activeIndex = ref(3)
			
	// 			return {
	// 				c1,
	// 				red,
	// 				activeIndex
	// 			}		
	// 		}
	// 	}).mount('#app')




    // 4.选项卡 [参考效果](https://www.jq22.com/yanshi24114)
    // const { createApp, ref } = Vue;

    //     const app = createApp({
    //         setup() {
    //             let zf = ref('');
    //             function fk(paymentMethod) {
    //                 zf.value = paymentMethod;
    //             }
    //             return {
    //                 zf,
    //                 fk
    //             }
    //         }
    //     }).mount('#app')
//   5. 模拟下拉框 [参考效果](https://www.jq22.com/webqd2375)







//   6. 动态添加删除数据  [参考效果](https://www.jq22.com/webqd7039)
//   7. 一个密码输入框，带有一个按钮用于切换显示或隐藏密码文本。  参考 https://www.jq22.com/yanshi374
//   8. 字数统计  https://www.jq22.com/yanshi3282
</script>

</html>